<html>
    <head>
        <title>CMD.HTML</title>
        <script>
            function _(id) {
                return document.getElementById(id);
            }
        </script>
    </head>
<body style="font-size:10px;">
<form onsubmit="send(_('in').value); _('in').value=''; return false;"> 
<input type="text" id="in" />
<input type="submit" value="Send" />
</form>
<div id="ready">
<input type="button" value="Ready" onclick="send('READY')" />
</div>
<div id="figures"></div>
<div id="game_div" style="background-color:#cccccc;">
    <div id="player_0">
        <div id="message_0"></div>
        <div id="equip_0">EQUIP:</div>
        <div id="judge_0">JUDGE:</div>
        <div id="card_0">CARD:</div>
        <div id="figure_0">FIGURE:</div>
        <div id="skill_0">SKILL:</div>
    </div>
</div>
<div id="debug"></div>
<table border="1px">
    <tr>
        <th>CMDS</th>
        <th>ARGS</th>
    </tr>
    <tr>
        <td><div id="cmd"></div></td>
        <td><div id="args"></div></td>
    </tr>
</table>

<script>
var user_id = -1;

function debugCmd(cmd, args) {
    _("cmd").innerHTML += 'CMD: ' + cmd + '<br/>';
    for(i in args) {
        _("args").innerHTML += '  ARGS:' + args[i] + '; ';
    }
    _("args").innerHTML += '<br/>';
}

// Send AJAX POST request <URL>?cmd=<CMD>&args=<ARGS>
function send(str) {
    //alert(str);
    cmd = str.split(' ', 1)[0];
    args = str.slice(cmd.length + 1);
    // if user_id is assigned, add it as the first arg.
    if(user_id >= 0)
        args = user_id + " " + args;
    //alert(cmd + ": " + args);
    request = new XMLHttpRequest();
    request.onreadystatechange = cmdListHandler;
    request.open('POST', '/cmd?cmd=' + cmd + '&args=' + args, true);
    request.send(null);
}

function cmdHandler(str) {
    cmd = str.cmd;
    args = str.args;
    debugCmd(cmd, args);
    if(cmd == 'ACK_JOIN') {
        user_id = args[0];
        loop();
    }
    else if(cmd == 'ACK_READY') {
        _("ready").innerHTML = "Ready";
    }
    else if(cmd == 'DISPATCH_CARD') {
        var newInput = document.createElement('input');
        newInput.type = 'button';
        newInput.value = args[0];
        newInput.setAttribute('onclick', 'send("USE_CARD ' + args[1] + '");');
        _("card_0").appendChild(newInput);
    }
    else if(cmd == 'CANDIDATE_FIGURE') {
    	var newInput = document.createElement('input');
        newInput.type = 'button';
        newInput.value = args[1];
        newInput.setAttribute('onclick', 'send("CHOOSE_FIGURE ' + args[0] + '");');
        _("figures").appendChild(newInput);
    }
    else if(cmd == 'ACK_CHOOSE_FIGURE') {
        _("figures").style.display = "none";
        _("figure_0").innerHTML = ""
    }
    else if(cmd == 'SET_FIGURE') {
        _("figure_0").innerHTML += args[0];
    }
    else if(cmd == 'SET_SKILL') {
        var newInput = document.createElement('input');
        newInput.type = 'button';
        newInput.value = args[1];
        newInput.setAttribute('onclick', 'send("USE_SKILL ' + args[0] + '");');
        _("skill_0").appendChild(newInput);
    }
    else if(cmd == 'REQ_ACTION') {
        _("message_0").innerHTML = "REQ_ACTION";
    }
}

function cmdListHandler() {
    if(request.readyState == 4) {
        cmds = eval('(' + request.responseText + ')');
        for(i in cmds) {
            cmdHandler(cmds[i]);
        }
    }
}

function mainLoopHandler() {
    if(mainLoopRequest.readyState == 4) {
        //_("debug").innerHTML += mainLoopRequest.responseText + ',<br/>';
        cmds = eval('(' + mainLoopRequest.responseText + ')');
        for(i in cmds) {
            cmdHandler(cmds[i]);
        }
        loop();
    }
}

function loop() {
    mainLoopRequest = new XMLHttpRequest();
    mainLoopRequest.onreadystatechange = mainLoopHandler;
    mainLoopRequest.open('GET', '/user?u_id=' + user_id, true);
    mainLoopRequest.send(null);
}

</script>

</body>
</html>
